{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/me.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            margin-left: 0px;
        }

        .profile {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            width: 100%;
            margin-bottom: 20px;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }

        .avatar img {
            width: 100%;
            height: 100%;
        }

        .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        h1 {
            margin: 0;
            font-size: 24px;
        }

        p {
            margin: 5px 0;
        }

        .section {
            background: #f9f9f9da;
            width: 100%;
            margin-bottom: 20px;
        }

        .section h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .left-align {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/me/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                个人信息
            </a>

            <a class="btn btn-success" href="/me/fabu/article">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                文章
            </a>

            <a class="btn btn-success" href="/me/fabu/tiezi">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                帖子
            </a>

            <a class="btn btn-success" href="/me/pl">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                评论
            </a>

            <a class="btn btn-success" href="/me/likes/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                喜欢
            </a>
        </div>
    </div>
    <div class="container">
        <div class="profile">
            <div class="avatar">
                <img src="{% static '/picture/tou.jpg' %}" alt="用户头像">
            </div>
            <div class="info">
                <h1></h1>
                <p></p>
            </div>
        </div>
        <div class="section">
            <h2>用户名</h2>
            <p>小智</p>
        </div>
        <div class="section">
            <h2>邮箱地址：</h2>
            <p>example@example.com</p>
        </div>
    </div>
{% endblock %}